<template>
  <div class="preivw">
    <div class="loading" v-if="loading">
      <a-spin :spinning="loading" />
    </div>
    <div class="content">
      <div class="tool-bar">
        <input type="file" @change="onChange" />
      </div>
      <div
        class="docx"
        :style="{ visibility: !loading ? 'visible' : 'hidden' }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import mammoth from 'mammoth/mammoth.browser'

let loading = ref(false)

function onChange(event) {
  let file = event.target.files[0] // 获取用户选择的文件
  if (file) {
    loading.value = true
    // 创建 Blob URL
    let blobURL = URL.createObjectURL(file)
    console.log('Blob URL:', blobURL)
    mammoth
      .convertToHtml({ path: blobURL })
      .then(function (result) {
        var html = result.value // The generated HTML
        var messages = result.messages // Any messages, such as warnings during conversion
        console.log(html, messages)
      })
      .catch(function (error) {
        console.error(error)
      })
  }
}
</script>

<style scoped lang="less">
.preivw {
  position: relative;
  height: 100%;
  .loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    // .tool-bar{

    // }
    .docx {
      flex: 1;
    }
  }
}
</style>
